<template>
  <div class="km clearfix" v-if="!loading">
      <SideBar class="fl" :normalData="normalData" :fullHeight="true" :sideBarData="sideBarData" @menuItemClick="handleClick" @submenuSelect="submenuSelect" :defaultOpeneds="defaultOpeneds"></SideBar>
      <div class="km-right-wrap">
        <transition
          name="fade"
          mode="out-in"
        >
          <keep-alive>
            <router-view :kmType="kmType" :dataType="activeName === 'customize' ? 'customize': ''"></router-view>
          </keep-alive>
        </transition>
      </div>
  </div>
</template>
<script>
  import {isHasFunc, isHasMenu} from '@/utils/m7Utils'
  import SideBar from '@/components/public-modules/side-bar/index'
  export default {
    name: 'KM',
    data () {
      return {
        normalData: null,
        sideBarData: {
          'defaultActive': 'kminner',
          'submenuArr': [
            {'submenuTitle': this.$t('routeI18n.km'), type: 'km', menu: [{ label: this.$t('km.kmInside'), value: 'inner'}, { label: this.$t('km.kmOutside'), value: 'outer'}]},
            {'submenuTitle': this.$t('webchat.quickReplay'), type: 'quick', menu: [{ label: this.$t('km.personalLibrary'), value: 'customize'}, { label: this.$t('km.publicLibrary'), value: 'quickReplyMain', hide: !this.isHaveMenu('simple_public_quick_reply_config')}]},
            {'submenuTitle': this.$t('km.exportOrImport'), type: 'export', menu: [{ label: this.$t('km.kmImport'), value: 'import', hide: true}, { label: this.$t('km.kmExport'), value: 'export', hide: true}]}
          ]
        },
        activeName: 'inner',
        loading: true,
        currentRoute: '',
        kmType: 'inner',
        defaultOpeneds: ['0', '1', '2']
      }
    },
    computed: {
      getMenus() {
        return this.$store.state.session.clientMenu || []
      }
    },
    watch: {
      getMenus(val){
        if (!val.some(item => item.id === 'nav_km')) {
          this.sideBarData.submenuArr.shift()
        }
      }
    },
    methods: {
      submenuSelect (data) {
        this.sideBarData.defaultActive = data
      },
      handleClick (data) {
        this.activeName = data.value
        if (['import', 'export', 'customize', 'quickReplyMain'].includes(this.activeName)) {
          this.$router.push(`/index/km/${this.activeName === 'customize' ? 'quickReplyMain' : data.value}`)
        } else {
          this.kmType = this.activeName
          this.$router.push('/index/km/' + data.value + '/curupdate')
          this.$store.commit('km/REFRESH_RIGHT', {type: 'init'})
          this.$store.commit('km/REFRESH_TREE', Math.random())
        }
      },
      isHaveMenu(func) {
        let user = this.$store.state.session.user
        return isHasMenu(func, user)
      },
      handleRole () {
        let showImport = false
        let showExport = false
        console.log(this.$store.state.session.user, this.$store.state.session, '------')
        if (isHasFunc('func_km_import', this.$store.state.session.user)) {
          showImport = true
        }
        if (isHasFunc('func_km_export', this.$store.state.session.user)) {
          showExport = true
        }
        if (!showImport && !showExport) { // 没有导入也没有导出的权限，不展示父级
          this.sideBarData.submenuArr.pop()
        } else {
          this.sideBarData.submenuArr.map(item => {
            if (item.type === 'export') { // 导入导出的权限处理
              item.menu.map(menuItem => {
                if (showImport && menuItem.value === 'import') {
                  menuItem.hide = false
                } else if (showExport && menuItem.value === 'export') {
                  menuItem.hide = false
                }
              })
            }
          })
        }
      }
    },
    components: {
      SideBar
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (vm.currentRoute) {
          vm.$router.push({path: vm.currentRoute})
        }
      })
    },
    beforeMount () {
      this.handleRole() // 角色权限处理
      this.$router.push('/index/km/inner/curupdate')
      Promise.all([this.$store.dispatch('getCache', {type: 'agents'})]).then(() => {
        this.loading = false
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl";
  .km
    height calc(100vh - 53px)
    background-color $cf-white
  .km-right-wrap .quickReplyMain
    margin-left 188px
    height calc(100vh - 52px)
</style>
